<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图书管理系统</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>


    <style>
        .bookBody {
            position: absolute;
            margin: 0; /*外边距*/
            padding: 0; /*内边距*/
            height: 100%;
        }

        div {
            width: 99%;
            border: 1px solid rebeccapurple;
        }

        .top, .footer {
            height: 8%;
            background-color: thistle;
        }

        .content {
            height: 82%;
        }

        .content div {
            display: inline-block;
            vertical-align: top;
        }

        .content li {
            line-height: 50px;
            border: 1px solid lightblue;
            list-style: none;
            margin-left: -30px;
        }

        .tab table {
            width: 100%;
            border: 1px solid blue;
        }

        .tab table th, td {
            width: 15%;
            border: 1px solid blue;
            text-align: center;
            /* cellpadding:0px; */
        }

        a {
            text-decoration: none;
        }

    </style>
</head>
<body>
<div class="bookBody">
    <div class="top">
        <h1 style="margin-top: -2px;">图书管理系统</h1>
        <!-- 你好，张三 -->
        <h4 id="name" style="margin-right:20px;float:right; margin-top: -40px;"></h4>
    </div>
    <div class="content">
        <div class="left" style="width: 10%; height: 100%;">
            <ul style="text-align:center;">
                <li>用户管理</li>
                <li>图书管理</li>
                <li>个人信息</li>
                <li>借阅管理</li>
            </ul>
        </div>
        <div class="right" style="width: 85%; height: 80%;">
            <div class="query" style="text-align: center; line-height: 50px;">
                <label>图书名称：</label><input type="text" class="content2"/> <label>出版社名称：</label><input
                    type="text" class="content2"/>
                <!-- <input type="button" id=“query” value="查询" /> -->
                <button id="btn">查询</button>
                <button id="add">新增</button>
                <button onclick="alert('你好')">弹窗</button>
                <button onclick="resetView()">重置</button>
            </div>
            <div class="tab">
                <table>
                    <tr>
                        <th>id</th>
                        <th>图书名称</th>
                        <th>图书价格</th>
                        <th>图书出版社</th>
                        <th>出版日期</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Java从入门到精通</td>
                        <td>40.0</td>
                        <td>北京出版社</td>
                        <td>2019-01-01</td>
                        <td>
                            <button class="del">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Java从入门到精通</td>
                        <td>40.0</td>
                        <td>北京出版社</td>
                        <td>2019-01-01</td>
                        <td>
                            <button class="del">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Java从入门到精通</td>
                        <td>40.0</td>
                        <td>北京出版社</td>
                        <td>2019-01-01</td>
                        <td>
                            <button class="del">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Java从入门到精通</td>
                        <td>40.0</td>
                        <td>北京出版社</td>
                        <td>2019-01-01</td>
                        <td>
                            <button class="del">删除</button>
                        </td>
                    </tr>
                </table>

            </div>
        </div>
    </div>
    <div class="footer">
        <!--超链接标签-->
        <a href="http://www.baidu.com" target="_blank">帮助</a>
    </div>
</div>


<!---脚本语句-->
<script>
    var num = 5;
    var str = "abc";
    var arr = ["a", "b", "c"];
    // for(var i=0;i<arr.length;i++){
    //     alert(arr[i]);
    // }

    //跳转到新增页面
    document.getElementById("add").onclick = function () {
        window.open("book-add.html");
    }

    $("#btn").click(function () {
        alert("通过jquery方式进行查询");
    })

    $(".del").click(function () {
        $(this).parent().parent().remove();
    })

    function resetView() {
        $(".content2").val("");
    }
</script>
</body>
</html>